<script>
import { PayContext } from '@/components/storybook/s-pay/pay-context'
import { PreviewContext } from '@/components/storybook/s-preview/preview-context'
import BDialogApplication from '@/components/storybook/b-dialog-application/index'
import BDialogPay from '@/components/storybook/b-dialog-pay/index'
import ZPreview from '@/components/storybook/z-preview'
import BDialogBot from '@/components/storybook/b-dialog-bot/index'
import { InterceptContext } from '@/components/storybook/s-Intercept/intercept-context'

export default {
  name: 'PayProvider',
  components: {
    BDialogApplication,
    BDialogPay,
    ZPreview
  },

  mounted () {
    this.addScript()
  },
  methods: {

    addScript () {
      window.Chargebee.init(window.SITE_CONFIG['chargebee-client'])
      PayContext.instance = window.Chargebee.getInstance()
    }
  },
  render () {
    return (
      <div class="pay-provider">
        {this.$slots.default}
        <BDialogApplication vModel={PayContext.infoModal} />
        <BDialogPay vModel={PayContext.payModal} payType={PayContext.payType}/>
        <ZPreview vModel={PreviewContext.files} />
        <BDialogBot vModel={InterceptContext.bot} />
      </div>
    )
  }
}
</script>
